@use '@angular/material' as mat;

mat.$grey-palette: mat.$blue-grey-palette;

// Background palette for dark themes.
mat.$dark-theme-background-palette: (
  status-bar: black,
  app-bar: map_get(mat.$grey-palette, 900),
  background: #151a30,
  hover: rgba(white, 0.04),
  // TODO(kara): check style with Material Design UX
  card: #222b45,
  dialog: #222b45,
  disabled-button: rgba(white, 0.12),
  raised-button: map-get(mat.$grey-palette, 800),
  focused-button: $light-focused,
  selected-button: map_get(mat.$grey-palette, 900),
  selected-disabled-button: map_get(mat.$grey-palette, 800),
  disabled-button-toggle: black,
  unselected-chip: map_get(mat.$grey-palette, 700),
  disabled-list-option: black,
  tooltip: map_get(mat.$grey-palette, 700),
  surface: rgba(34, 43, 69, 0.875)
);

// Define an alternate dark theme.
$dark-primary: mat.define-palette(mat.$indigo-palette);
$dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
$dark-warn: mat.define-palette(mat.$deep-orange-palette);
$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $dark-primary,
      accent: $dark-accent,
      warn: $dark-warn,
    ),
  )
);

// In case a theme object has been passed instead of a configuration for
// the color system, extract the color config from the theme object.
// $config: if(_mat-is-theme-object($dark-theme),
//     mat.get-color-config($dark-theme), $dark-theme);
// for Material Components theming
.ngm-theme-dark {
  // @include mat.all-component-colors($dark-theme);
  // @include mat.dialog-theme($dark-theme);
  @include ngm-mat-theme((
    color: mat.get-color-config($dark-theme),
    typography: null,
    density: null,
  ));
}
